<template>
  <div class="dataPageHeadComponent" v-if="oItem">
    <div class="content">
      <div class="head">
        <i class="iconfont icon-rili1"></i>
        <span>支付宝数据汇总（2020-11）</span>
      </div>
      <ul
        class="body"
        :style="{
          backgroundColor: oItem.main.dataPageBgColor,
          backgroundImage: 'url(' + oItem.main.dataPageBgImg + ')',
        }"
      >
        <li v-for="l in list" :key="l.id">
          <p class="name" :style="{ color: oItem.main.titleFontColor }">{{ l.name }}</p>
          <p class="num">
            <span class="val" :style="{ color: oItem.main.dataFontColor }">{{
              l.num
            }}</span>
            <span class="suffix" :style="{ color: oItem.main.titleFontColor }">{{
              l.suffix
            }}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "dataPageHeadComponent",
  data() {
    return {
      oItem: null,
      list: [
        { id: 1, name: "实名数", num: "6", suffix: "个" },
        { id: 2, name: "T+1预估有效实名", num: "0", suffix: "" },
        { id: 3, name: "T+7实名数", num: "0", suffix: "" },
        { id: 4, name: "核销数", num: "9", suffix: "个" },
        { id: 5, name: "T+1预估有效核销", num: "4", suffix: "个" },
      ],
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      //console.log("backTopComponent被通知更新");
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.dataPageHeadComponent {
  .content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding-bottom: 20px;
    .head {
      padding: 10px 15px;
      box-sizing: border-box;
      i {
        margin-right: 5px;
        color: #41aaff;
        font-size: 18px;
      }
    }
    .body {
      background-color: #6091f8;
      display: flex;
      border-radius: 10px;
      margin: 0 15px;
      box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
        -3px -3px 3px #eee;
      padding: 30px 0 15px;
      flex-wrap: wrap;
      background-position:center center;
      background-repeat:no-repeat;
      background-size:cover;
      li {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        margin-bottom: 15px;
        .name {
          font-size: 14px;
          opacity: 0.7;
          margin-bottom: 8px;
        }
        .num {
          .val {
            font-size: 22px;
            margin-right: 2px;
          }
          .suffix {
            font-size: 14px;
            opacity: 0.7;
          }
        }
      }
    }
  }
}
</style>
